{% extends 'layout.html' %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">填写资产基本信息</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-chevron-up"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="col-sm-10">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active"><a href="#single"><i class="fa fa-laptop"></i> 单台添加</a></li>
                            <li><a href="#multi"><i class="fa fa-bar-chart-o"></i> 批量添加</a></li>
                        </ul>
                        <div id="tabcontent" class="tab-content">
                            <div id="single" class="tab-pane active">
                                <div style="margin-top: 15px;"></div>
                                <form id="asset_form" method="post" class="form-horizontal">
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">主机名<span
                                                class="text-red">*</span>：</label>
                                        <div class="col-sm-8">
                                            {{ asset_form.hostname }}
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">主机ip：</label>
                                        <div class="col-sm-8">
                                            {{ asset_form.ip }}
                                        </div>
                                    </div>
                                    <p class="col-sm-offset-2">Tips: 如果IP地址不填写, IP默认会设置与主机名一致</p>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">端口<span
                                                class="text-red">*</span>：</label>
                                        <div class="col-sm-8">
                                            {{ asset_form.port }}

                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">主机类型：</label>
                                        <div class="col-sm-8">
                                            <select name="asset_type" class="form-control">
                                                {% for type in asset_types %}
                                                    <option value="{{ type.0 }}">{{ type.1 }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">机房：</label>
                                        <div class="col-sm-8">
                                            <select name="idc" class="form-control">
                                                {% for idc in idc_all %}
                                                    <option value="{{ idc.id }}">{{ idc.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">运行环境：</label>
                                        <div class="col-sm-8">
                                            <select name="env" class="form-control">
                                                {% for env in asset_envs %}
                                                    <option value="{{ env.0 }}">{{ env.1 }}</option>
                                                {% endfor %}
                                            </select>

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">主机状态：</label>
                                        <div class="col-sm-8">
                                            <select name="status" class="form-control">
                                                {% for status in asset_status %}
                                                    <option value="{{ status.0 }}">{{ status.1 }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">所属主机组：</label>
                                        <div class="col-sm-8">
                                            <select id="group" name="group" class="form-control m-b" multiple
                                                    size="8">
                                                {% for group in asset_group_all %}
                                                    {% if forloop.first %}
                                                        <option value="{{ group.id }}"
                                                                selected>{{ group.name }}</option>
                                                    {% else %}
                                                        <option value="{{ group.id }}">{{ group.name }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">是否激活<span
                                                class="text-red">*</span>：</label>
                                        <div class="col-sm-8">
                                            <div class="radio i-checks">
                                                <label> <input type="radio" checked="" value="1" name="is_active">激活
                                                </label>
                                                <label> <input type="radio" value="0" name="is_active"> 禁用</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <div class="col-sm-4 col-sm-offset-2">
                                            <button id="submit_button" class="btn btn-default" type="submit">保存
                                            </button>
                                            <a href="javascript:history.go(-1)" class="btn btn-white">取消</a>
                                            <!--<button class="btn btn-white" type="submit">重置</button>-->
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div id="multi" class="tab-pane">
                                <p>请下载Excel文件, 按照格式填写主机信息, 上传导入. <a href="/static/files/excels/asset.xlsx">点击下载模板</a>
                                </p>
                                <form action="" method="POST" enctype="multipart/form-data">
                                    <div class="file-box">
                                        <input id='textfield'>
                                        <a id="localFile" class="btn btn-info btn-sm file-btn" type="button"><i
                                                class="fa fa-upload"></i> 添加本地文件
                                            <input id="fileUpload" name="file_name" type="file" multiple="multiple"
                                                   onchange="document.getElementById('textfield').value=this.value">
                                        </a>
                                        {#                                        <input type="button" class="btn btn-info btn-sm" name="file_name"#}
                                        {#                                               value="点击选择文件">#}
                                        {#                                        <input type="file" name="file_name" class="file" id="fileField" size="28"#}
                                        {#                                               onchange="document.getElementById('textfield').value=this.value"/>#}
                                        <button class="btn btn-default btn-sm" type="submit">上传文件</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                </div>
                <!-- ./box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
{% endblock %}
{% block self_footer_js %}
    <script>
        $(function () {

            $('#myTab a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            });

        });

        $('#asset_form').validator({
            timely: 2,
            theme: 'yellow_right_effect',
            stopOnError: true,
            rules: {
                check_ip: [/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/, 'ip地址不正确'],
                check_port: [/^\d{1,5}$/, '端口号不正确'],
            },
            fields: {
                "hostname": {
                    rule: "required",
                    tip: "主机名",
                    ok: ""
                },
                "ip": {
                    rule: "check_ip",
                    tip: "ip",
                    ok: ""
                },
                "port": {
                    rule: "required",
                    tip: "输入端口号",
                    ok: "",
                    msg: {required: "必须填写"}
                },
            },
            valid: function (form) {
                form.submit();
            }
        });
    </script>
{% endblock %}